﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>portfoliospecs</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
    <script src="../../Highcharts/js/highcharts.js"></script>
    <script src="/Scripts/jquery-1.8.1.js"></script>
    <script src="../../lib/underscore.js"></script>
    <link href="/pages/portfoliospecs/portfoliospecs.css" rel="stylesheet" />
    <script src="/pages/portfoliospecs/portfoliospecs.js"></script>
    <script src="../../js/Structures/FolioFixer_DataTypes.js"></script>
    <script src="../../js/Data%20Access/FolioFixer_DataSources.js"></script>
    <script src="../../js/Data%20Access/FolioFixer_Calculators.js"></script>
    <script src="../../js/Data%20Access/ResourceManager.js"></script>

</head>
<body>
    <div class="portfoliospecs fragment">
        <header aria-label="Header content" role="banner">
            <button class="win-backbutton" aria-label="Back" disabled type="button"></button>
            <h1 class="titlearea win-type-ellipsis">
                <span class="pagetitle">Portfolio Specifics</span>
            </h1>
            <div id="loadingAnchor" />
        </header>
        <section aria-label="Main content" role="main" style="overflow:scroll;">
            <label for="startdatepicker">Start Date: </label>
            <div id="startdatepicker" data-win-control="WinJS.UI.DatePicker" data-win-options="{ current : '1/1/2012' }"></div>
            <br />
            <label for="simpleToggle">Use Simple Rates: </label>
            <div id="simpleToggle" class="toggle" data-win-control="WinJS.UI.ToggleSwitch"></div>
            <br />
            <br />
            <div id="content">
                <h2>Efficient Frontier</h2>
                <hr />
                <br />
                <div id="frontierChart" style="padding-bottom: 50px;"></div>

                <div id="portfolioStats" class="left">
                    <div id="assets" class="left" style="padding-right: 30px;">
                        <h2>Assets</h2>
                        <hr />
                        <div id="assetItemTemplate" data-win-control="WinJS.Binding.Template">
                            <div class="listitem">
                                <h4 data-win-bind="innerText: symbol"></h4>
                                <label>Default Weight: </label>
                                <span data-win-bind="innerText: allocation"></span>
                            </div>
                        </div>
                        <div id="assetList" style="margin-bottom: 0px;" data-win-control="WinJS.UI.ListView" data-win-options="{ itemDataSource : FolioFixer.PortfolioPage.DataSource, itemTemplate : select('#assetItemTemplate'), layout: {type: WinJS.UI.GridLayout} }"></div>
                    </div>

                    <div id="assetWeights" class="left" style="padding-right: 30px;"></div>
                    <div id="historicalstats" class="left" style="padding-right: 30px;">
                        <h2>Historical Statistics</h2>
                        <hr />
                        <label for="portRate"><strong>Mean Return Rate: </strong></label>
                        <span id="portRate"></span>
                        <br />
                        <label for="portStdev"><strong>Standard Deviation: </strong></label>
                        <span id="portStdev"></span>
                        <br />
                        <label for="portCorrelation"><strong>Market Correlation: </strong></label>
                        <span id="portCorrelation"></span>
                        <br />
                        <label for="portBeta"><strong>Beta: </strong></label>
                        <span id="portBeta"></span>
                        <br />
                        <label for="portSharpe"><strong>Sharpe: </strong></label>
                        <span id="portSharpe"></span>
                        <br />
                        <br />
                        <input type="button" id="btnHistorical" value="Calculate!" />
                        <br />
                        <br />
                        <!--<table id="correlationTable">
                        </table>-->
                    </div>
                    <div id="optimalstats" class="left" style="padding-right: 30px;">
                        <h2>Optimal Statistics</h2>
                        <hr />
                        <input type="text" id="minrateText" placeholder="Minimum rate of return" />
                        <br />
                        <label for="optRate"><strong>Mean Return Rate: </strong></label>
                        <span id="optRate"></span>
                        <br />
                        <label for="optStdev"><strong>Standard Deviation: </strong></label>
                        <span id="optStdev"></span>
                        <br />
                        <label for="optCorr"><strong>Market Correlation: </strong></label>
                        <span id="optCorr"></span>
                        <br />
                        <label for="optBeta"><strong>Beta: </strong></label>
                        <span id="optBeta"></span>
                        <br />
                        <label for="optSharpe"><strong>Sharpe: </strong></label>
                        <span id="optSharpe"></span>
                        <br />
                        <br />
                        <input type="button" id="btnOptimal" value="Calculate!" />
                    </div>
                    <div id="capmstats" class="left">
                        <h2>Expected Statistics (CAPM)</h2>
                        <hr />
                        <input type="text" id="marketText" placeholder="Market rate" />
                        <br />
                        <input type="text" id="excessText" placeholder="Excess rate">
                        <br />
                        <label for="expRate"><strong>Mean Return Rate: </strong></label>
                        <span id="expRate"></span>
                        <br />
                        <label for="expStdev"><strong>Standard Deviation: </strong></label>
                        <span id="expStdev"></span>
                        <br />
                        <label for="expCorr"><strong>Market Correlation: </strong></label>
                        <span id="expCorr"></span>
                        <br />
                        <label for="expBeta"><strong>Beta: </strong></label>
                        <span id="expBeta"></span>
                        <br />
                        <label for="expSharpe"><strong>Sharpe: </strong></label>
                        <span id="expSharpe"></span>
                        <br />
                        <br />
                        <input type="button" id="btnCAPM" value="Calculate!" />
                    </div>
                </div>
            </div>
        </section>
    </div>
    <div id="createAppBar" data-win-control="WinJS.UI.AppBar" data-win-options="">
        <button id="addButton" data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdAdd',label:'Add',icon:'add',section:'global',tooltip:'Add item'}">
        </button>
    </div>

    <div id="addSymbolFlyout" data-win-control="WinJS.UI.Flyout" aria-label="{Add symbol flyout}">
        <h3>Add Symbol</h3>
        <label for="symbolInput">Symbol: </label>
        <input id="symbolInput" type="text" />
        <br />
        <button id="confirmSymbol" type="submit">Confirm</button>
    </div>
    <div id="loadingFlyout" data-win-control="WinJS.UI.Flyout" aria-label="{Loading flyout}">
        <h3>Wait just a second!</h3>
        <p>We're crunching a few numbers...</p>
    </div>
</body>
</html>
